<template>
  <section class="table-wrap">
    <el-table ref="table"
              v-loading="tableLoading"
              :data="currentData"
              style="width: 100%"
              max-height="485"
              height="475"
              border>
      <el-table-column type="index"
                       width="50">
      </el-table-column>
      <template v-for="(item,index) in tableHeaderData">
        <el-table-column v-if="item.type==='contractNo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div class="pagination">
              <div v-if="!billId || dialogFlag">{{scope.row.contractNo}}</div>
              <link-detail v-else
                           :value="`${scope.row.contractNo}`"
                           :row="scope.row"
                           :url="path"
                           :params-data="paramsData"
                           :link-type=1
                           :copy-visable="false"
                           v-bind="$attrs" />
              <span v-if="scope.row.combineContractNo"
                    class="order-type mlr10">
                合单
              </span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column v-else-if="item.type==='fromInfo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <shipping-info :row="scope.row"
                           :name="shipOrsend ?'billShipping':''"
                           class="tooltipSty" />
          </template>
        </el-table-column> -->
        <el-table-column v-else-if="item.type === 'fromInfo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderInfo :row="scope.row"
                                :value="infoValues(scope.row)"
                                class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromAddress'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderAddress :row="scope.row"
                                   :value="addressValues(scope.row)"
                                   class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='toInfo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-info :row="scope.row"
                                           class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='toAddress'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-address :row="scope.row"
                                              class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='orderInfo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <order-info class="tooltipSty"
                        :row="scope.row"
                        name="billWayinfo" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='carrierName' && billType === 2"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- <div>{{scope.row.carrierName}}</div>
            <div v-if="scope.row.driverName">{{scope.row.driverName}}</div> -->
            <CarrierInfo class="tooltipSty"
                         :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='carInfo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <car-info :row="scope.row"
                      class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='billFee'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`115px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <object-fee :row="scope.row"
                        :obj-name="'waybillCache'"
                        :field-name="`${item.props}`"
                        class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type==='time'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row[item.timeName]">
              <span>{{$moment(scope.row[item.timeName]).format('YYYY-MM-DD HH:mm')}}</span>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row[item.type]">{{scope.row[item.type]}}</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 总计 -->
    <!-- <el-table v-if="billRecordType === 4"
              ref="totalTable"
              :data="totalData"
              :show-header="false"
              class="totalSty"
              :row-class-name="tableRowClassName"
              style="width: 100%">
      <el-table-column width="50">
      </el-table-column>
      <template v-for="(item,index) in tableHeaderData">
        <el-table-column v-if="item.type==='orderInfo'"
                         :key="index+`${item.type}`"
                         :prop="item.type"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <order-info class="tooltipSty"
                        :row="scope.row"
                        :name="'billTotal'" />
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index+`${item.type}`"
                         :prop="item.type"
                         :width="`${['billFee','totalFee'].includes(item.type) ? '115' : colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="item.props">{{scope.row[item.props] || 0}}</div>
            <div v-else-if="scope.row[item.type]">{{scope.row[item.type]}}</div>
            <div v-else></div>
          </template>
        </el-table-column>
      </template>
    </el-table> -->
  </section>
</template>

<script>
import WaybillConsigneeSenderAddress from "@components/table/column/WaybillConsigneeSenderAddress.vue";
import WaybillConsigneeSenderInfo from "@components/table/column/WaybillConsigneeSenderInfo.vue";
// import ShippingInfo from "@components/table/column/ShippingInfo.vue"
import ShipmentSenderInfo from "@components/table/column/ShipmentSenderInfo.vue"
import ShipmentSenderAddress from "@components/table/column/ShipmentSenderAddress.vue"
import OrderInfo from "@components/table/column/OrderInfo.vue"
import CarInfo from "@components/table/column/CarInfo.vue"
import CarrierInfo from "@components/table/column/CarrierInfo.vue";
import LinkDetail from "@components/table/column/LinkColumn.vue"
import ObjectFee from "@components/table/column/ObjectColumn.vue"

export default {
  name: 'WayBillList',
  components: {
    WaybillConsigneeSenderAddress,
    WaybillConsigneeSenderInfo,
    // ShippingInfo,
    ShipmentSenderInfo,
    ShipmentSenderAddress,
    OrderInfo,
    ObjectFee,
    CarInfo,
    CarrierInfo,
    LinkDetail
  },
  props: {
    billId: {
      type: Number,
      default: () => null
    },
    // 当前页数据源
    currentData: {
      type: Array,
      default: () => []
    },
    // 总数据源
    totalData: {
      type: Array,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: () => 10
    },
    page: {
      type: Number,
      default: () => 1
    },
    colWidth: {
      type: Number,
      default: () => 162
    },
    dialogFlag: {
      type: Boolean,
      default: false
    },
    // 发货方、收货方信息 是否只显示两行
    shipOrsend: {
      type: Boolean,
      default: false
    },
    billType: {
      type: Number || String,
      default: () => null
    },
    billRecordType: {
      type: Number,
      default: () => null
    },
    tableLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      tableHeaderData: [
        { label: '合同编号', type: 'contractNo' },
        { label: '合单号', type: 'combineContractNo' },
        { label: '发货方信息', type: 'fromInfo' },
        { label: '发货地址', type: 'fromAddress' },
        { label: '收货方信息', type: 'toInfo' },
        { label: "收货地址", type: "toAddress" },
        { label: '运单信息', type: 'orderInfo' },
        { label: '总运费（元）', type: 'billFee', props: 'totalFee' },
        { label: '预付款', type: 'billFee', props: 'prepayFee' },
        { label: '货到付款', type: 'billFee', props: 'arrivePayFee' },
        { label: '代收货款', type: 'billFee', props: 'collectionFee' },
        { label: '回执付款', type: 'billFee', props: 'receiptFee' },
        { label: '物品价值（元）', type: 'billFee', props: 'totalValue' },
        { label: '车型', type: 'carInfo' },
        { label: '发货时间', type: 'time', timeName: 'fromTime' },
        { label: '单据编号', type: 'orderNo' },
        { label: '备注', type: 'desc' },
      ],
      paramsData: ["waybillId"],
      selectData: [],
      activeAmount: {
        totalWeight: 0,
        totalVolume: 0,
        weight: null,
        volumn: null
      },
      activeIndex: null
    }
  },
  computed: {
    path () {
      const { name } = this.$route
      return ['custometBillPayment', 'custometBillPaymentWindow'].includes(name) ? 'customerFinanceWayFee' : 'wayFeeDetail'
    },
    infoValues () {
      return row => {
        return {
          contactName: row.toContactName,
          contactMobile: row.toContactMobile
        }
      }
    },
    addressValues () {
      return row => {
        return {
          province: row.fromProvince,
          city: row.fromCity,
          district: row.fromDistrict,
          address: row.fromAddress
        }
      }
    }
  },
  mounted () {
    // if (this.billRecordType === 4) this.syncScroll()
    if (this.billType === 2) {
      this.tableHeaderData.splice(5, 0, {
        label: '承运方名称', type: 'carrierName'
      })
    }
  },
  // destroyed () {
  //   this.syncScroll() //销毁监听
  // },
  methods: {
    // 滚动条同步
    syncScroll () {
      let tableWrap = this.$refs.table.bodyWrapper
      let totalWrap = this.$refs.totalTable.bodyWrapper
      tableWrap.addEventListener("scroll", () => {
        totalWrap.scrollLeft = tableWrap.scrollLeft
      })
      totalWrap.addEventListener("scroll", () => {
        tableWrap.scrollLeft = totalWrap.scrollLeft
      })
    },
    tableRowClassName () {
      return 'totalRowSty'
    },
  }
}
</script>
<style lang="scss" scoped>
.table-wrap {
  padding: 0px 20px;
  ::v-deep .el-table--small {
    margin-bottom: 10px;
  }
}
.totalSty /deep/ .el-table__body-wrapper {
  overflow-x: hidden !important;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tooltipSty {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}
/deep/ .el-table .totalRowSty {
  background-color: var(--prev-bg-lightgrey) !important;
}
</style>